<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>


<body>

    <form id="register-form" role="form" class="form-horizontal" method="get">
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="firstname">用户名：</label>
            <div class="col-sm-5">
                <input class="form-control" id="firstname" name="firstname" style="width: 200px; height: 30px;" />
                <span style="color:red"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="password">密码：</label>
            <div class="col-sm-5">
                <input class="form-control" id="password" name="password" type="password"
                    style="width: 200px; height: 30px;" />
                <span style="color:red"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label>
            <div class="col-sm-5">
                <input class="form-control" id="confirm_password" name="confirm_password" type="password"
                    style="width: 200px; height: 30px;" />
                <span style="color:red"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="email">邮箱：</label>
            <div class="col-sm-5">
                <input class="form-control" id="email" name="email" style="width: 200px; height: 30px;" />
                <span style="color:red"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="phone">手机号码：</label>
            <div class="col-sm-5">
                <input class="form-control" id="phone" name="phone" style="width: 200px; height: 30px;" />
                <span style="color:red"></span>
            </div>
        </div>
    </form>

</body>
<script>
    //用户名
    $('#firstname').blur(function(){
        var username=$('#firstname').val();
        var reg=/[\u4e00-\u9fa5]{1,}/
        if(username==""){
            $('#firstname').next().html('用户名不能为空')
            return
        }
        if(!reg.test(username)){
            $('#firstname').next().html('输入格式不正确')
            return
        }
        $('#firstname').next().html('√');
        return
    })

    //密码
    $('#password').blur(function () {
        var psd = $(this).val();
        var reg = /^.{6,12}$/,reg2 = /[^\d]+/g
        if (psd == '') {
            $('#password').next().html('输入不能为空')
            return
        }
        if (!reg.test(psd)) {
            $('#password').next().html('密码不符合要求')
            return
        }
        if (psd.length < 6 || psd.length > 12) {
            $('#password').next().html('密码长度不对')
            return
        }
        $('#password').next().html('√')
        return
    })

    //确认密码
    $('#confirm_password').blur(function () {
        var psd = $('#password').val();
        var psd1 = $(this).val();
        if (psd1 == '') {
            $('#confirm_password').next().html('输入不能为空')
            return
        }
        if (psd !== psd1) {
            $('#confirm_password').next().html('输入密码不一致')
            return
        } else {
            $('#confirm_password').next().html('√')
        }
    })


    //邮箱
    $('#email').blur(function () {
        var email = $(this).val();
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (email == "") {
            $('#email').next().html('输入不能为空')
            return
        }
        if (!reg.test(email)) {
            $('#email').next().html('输入不符合格式')
            return
        }
        $('#email').next().html('√')
        return
    })


    //手机号码
    $('#phone').blur(function () {
        var number = $('#phone').val();
        var reg = /^1[2-9]\d{9}$/;
        if (number == "") {
            $('#phone').next().html('输入不能为空')
            return
        }
        if (!reg.test(number)) {
            $('#phone').next().html('输入不符合格式')
            return
        }
        $('#phone').next().html('√')
        return
    })
</script>

</html>